<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 头部 -->
    <div class="header plr20">
        <!-- 头部箭头（定位） -->
        <div class="backimg">
            <span id="headimg" class="iconfont icon-zuojiantou"></span>
        </div>
        <!-- 身体部分 -->
        <div class="first">
            <div class="f1">
                <span>我的运动数据</span>
                <img id="portrait" src="../../assets/imgs/ing.gif" alt="">
            </div>
            <div class="f2">
                <div>
                    <p>总运动</p>
                    <p><span id="sum7Duration">100</span>分钟</p>
                </div>
                <div>
                    <p>本周消耗</p>
                    <p><span id="sum7Calorie">100</span>千卡</p>
                </div>
            </div>
            <div class="f3">
                <div>
                    <p>消耗</p>
                    <p>100</p>
                </div>

                <div>
                    <p>累计(天)</p>
                    <p>100</p>
                </div>

                <div>
                    <p>连续(天)</p>
                    <p>100</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 图标区域 -->
    <div class="second">
        <div id="main1">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main01" style="width: 100%;height:100%;"></div>
        </div>
        <div id="main2">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main02" style="width: 100%;height:100%;"></div>
        </div>
        <div id="main3">
            <div id="main03" style="width: 100%;height:100%;"></div>
        </div>
 
    </div>
</body>

</html>